<template>
  <div class="end_search">
    <!-- 搜索 -->
    <van-row>
      <van-col span="1" class="back" @click="back">
        <i class="iconfont icon-back"></i>
      </van-col>
      <van-col span="23">
        <form action="/">
          <van-search v-model="searchs" placeholder="请输入搜索关键词" @search="onSearch(searchs)" />
        </form>
      </van-col>
    </van-row>
    <!-- 搜索结果列表 -->
    <div v-if="searchList.length > 0">
      <div>
        <span class="title">搜索 "{{searchs}}" 的结果:</span>
      </div>
      <div class="operation">
        <div @click="sortID">全部</div>
        <div @click="sortPrice">价格</div>
        <div>筛选</div>
      </div>
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="(item, index) in searchList" :key="index">
          <div @click="todetails(item.id)">
            <div>
              <van-image :src="item.shop_image"></van-image>
            </div>
            <div>
              <span style="color:#ff464e; font-size:16px;">￥{{item.shop_price}}</span>
              <span
                style="color:#bbb; font-size:10px;text-decoration: line-through;"
              >￥{{item.shop_old_price}}</span>
              <br />
              <p class="title-p">{{item.shop_name}}</p>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 搜索失败 -->
    <div class="defeated" v-if="searchList.length == 0">
      <!-- 提示内容 -->
      <van-image
        width="150"
        height="150"
        src="https://jp.juancdn.com/jpwebapp_v1/images_v1/icon/rearch-result.png?d5c13c9b-1&sv=449ce9ee"
      ></van-image>
      <div style="color:#333; margin-bottom:10px;">哎呀，结果溜走了，换个词试试</div>
      <div style="color:#666;font-size:12px;">为您推荐以下商品</div>
      <!-- 推荐商品 -->
      <div class="shop">
        <van-divider :style="{ color: '#999', borderColor: '#333', padding: '15px 16px 0px' }">热销商品</van-divider>
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="item in sceneList" :key="item.id">
            <div @click="todetails(item.id)">
              <div>
                <van-image :src="item.image"></van-image>
              </div>
              <div class="title-p">
                <span style="color:#ff464e; font-size:16px;">{{item.price}}</span>
                <span style="color:#bbb; font-size:10px;">{{item.old_price}}</span>
                <br />
                <p class="title-p">{{item.name}}</p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 回到顶部 -->
      <vueToTop class="btntop" :type="7" right="30" bottom="70" top="1000" size="35" duration="500"></vueToTop>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchs: this.$route.query.name, // 搜索框内内容
      searchList: [], // 搜索结果数据
      sceneList: [], // 推荐商品
      descarr: [],
      ascarr: []
    };
  },
  methods: {
    // 搜索数据
    onSearch(searchs) {
      this.defeated();
      this.$http.get("/search", { params: { name: searchs } }).then(res => {
        this.searchList = res.data.data;
      });
    },
    // 全部(id)
    sortID() {
      this.onSearch(this.searchs);
    },
    // 倒序
    descPrice(searchs) {
      this.$http
        .get("/search_desc", { params: { name: searchs } })
        .then(res => {
          this.descarr = res.data.data;
        });
    },
    // 正序
    ascPrice(searchs) {
      this.$http.get("/search_asc", { params: { name: searchs } }).then(res => {
        this.ascarr = res.data.data;
      });
    },
    // 价格
    sortPrice() {
      if (this.searchList == this.ascarr) {
        this.searchList = this.descarr;
      } else if (this.searchList == this.descarr) {
        this.searchList = this.ascarr;
      } else {
        this.searchList = this.descarr;
      }
    },
    // 返回搜索页
    back() {
      this.$router.push("/start_search");
    },
    // 搜索失败
    defeated() {
      if (this.searchList.length == 0) {
        this.$http.get("/index_shop").then(res => {
          res.data.data.forEach(v => {
            this.sceneList.push({
              id: v.id,
              image: v.shop_image,
              price: "￥" + v.shop_price,
              old_price: "￥" + v.shop_old_price,
              name: v.shop_name
            });
          });
        });
      }
    },
    // 跳转到商品详情页
    todetails(id) {
      this.$router.push({ path: "/shopdetails", query: { id: id } });
    }
  },
  created() {
    this.onSearch(this.searchs);
    this.ascPrice(this.searchs);
    this.descPrice(this.searchs);
  }
};
</script>
<style lang="less">
.end_search {
  .back {
    position: relative;
    i {
      position: absolute;
      top: 18px;
      left: 6px;
    }
  }
  .defeated {
    text-align: center;
  }
  .shop {
    background-color: #f4f4f8;
  }
  .title {
    margin-left: 10px;
    color: #666;
    font-size: 12px;
  }
  .operation {
    margin: 0 10px;
    overflow: hidden;
    border-bottom: 1px dashed #999;
    div {
      width: 33%;
      height: 30px;
      float: left;
      text-align: center;
      line-height: 30px;
    }
  }
  .btntop {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px -1px 3px #888 inset;
  }
  .title-p {
    color: #333;
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    width: 150px; /*需要配合宽度来使用*/
  }
}
</style>